import React, { Component } from "react";
import {
  Button,
  Col,
  Input,
  Row,
  Tag,
  Checkbox,
  Space,
  Form,
  InputNumber,
} from "antd";
import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
import "../../style/style.less";
import PropTypes from "prop-types";
import TheUpload from "./upload";
import TheDialog from "@/components/TheDialog";
import { limitDecimals } from "@/utils/numberFixed2";
import _ from "lodash";
import TheButton from "../../../../components/TheButton";

const skuOption = [
  { label: "文字", value: 1 },
  { label: "图片", value: 2 },
];
const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 },
};

class SkuUpdate extends Component {
  state = {
    skuData: {
      type: "text", //suk类型 text文字， img图片
    },
    skuType: 1,
    specifications: [],
    tableResult: [],
    dataSource: [],
    maxIndex: 0,
    numResult: [],
    checkedAllStatus: false,
    skuNum: "",
    delete: [],
    itemclosable: true,
    ischange: false,
  };

  componentDidMount() {
    let skuInfo = this.props.skuInfo;
    if (this.props.skuData) {
      let { skuPropertyArray, numResult } = this.props.skuData;
      for (let i = 0; i < skuPropertyArray.length; i++) {
        skuPropertyArray[i].child.map((v) => {
          v.ischange = false;
        });
      }
      for (let j = 0; j < numResult.length; j++) {
        for (let k = 0; k < skuInfo.length; k++) {
          if (numResult[j].SKUId === skuInfo[k].SKUId) {
            skuInfo[k].fileList = numResult[j].fileList;
            skuInfo[k].skuCurrentPrice = skuInfo[k].skuCurrentPrice / 100;
            skuInfo[k].skuWeight = skuInfo[k].skuWeight / 1000;
            skuInfo[k].skuOriginalPrice = skuInfo[k].skuOriginalPrice / 100;
          }
        }
      }
      console.log(skuInfo);
      switch (skuPropertyArray.length) {
        case 1:
          this.setState({
            skuNum: null,
            skuSec: null,
            skuF: skuPropertyArray[0].child.length,
          });
          break;
        case 2:
          this.setState({
            skuNum: null,
            skuSec: skuPropertyArray[1].child.length,
            skuF: skuPropertyArray[0].child.length,
          });
          break;
        case 3:
          this.setState({
            skuNum: skuPropertyArray[2].child.length,
            skuSec: skuPropertyArray[1].child.length,
            skuF: skuPropertyArray[0].child.length,
          });
          break;
        default:
          break;
      }
      this.setState(
        {
          specifications: skuPropertyArray,
          numResult: skuInfo,
          skuInfo,
        },
        () => {
          // console.log(this.state.numResult)
          this.state.specifications.length > 0 &&
            this.initSpecifications(this.state.specifications, true);
        }
      );
    } else {
      this.state.specifications.length > 0 &&
        this.initSpecifications(this.state.specifications);
    }
  }

  /**
   * @desc
   * */
  skuTypeChange = (e) => {
    const skuType = e.target.value;
    this.setState({ skuType });
  };
  /**
   * @desc sku属性添加
   * */
  // skuAdd = () => {
  //   const specifications = [...this.state.specifications];
  //   let status = false;
  //   if (specifications.length) {
  //     specifications.forEach((v) => {
  //       if (!v.name || !v.child.length) {
  //         status = true;
  //       }
  //     });
  //   }
  //   if (status) {
  //     return React.$message({
  //       type: "info",
  //       content: "请补全商品规格！",
  //     });
  //   }
  //   specifications.push({
  //     name: "", //规格名称
  //     child: [],
  //     inputVal: "",
  //     isHidden: false,
  //     isImgShow: false,
  //     SKUId: "",
  //   });
  //   this.setState({ specifications });
  //   this.initSpecifications(specifications, true, true);
  // };
  /**
   * @desc 编辑suk名称
   * */
  sukEdit = (e, i) => {
    const specifications = [...this.state.specifications];
    const val = e.target.value;
    specifications[i].name = val;
    specifications[i].child.forEach((item) => {
      item.name = val;
    });
    this.setState({ specifications });
  };
  /**
   * @desc 是否显示图片信息
   * */
  skuImgChange = (e, index) => {
    const specifications = [...this.state.specifications];
    const checked = e.target.checked;
    if (checked) {
      specifications.map((v, i) => {
        v.isImgShow = i === index;
        return v;
      });
    } else {
      specifications[index].isImgShow = checked;
    }
    this.initSpecifications(specifications, true);
  };
  /**
   * @desc 删除sku项
   * */
  skuDelete = (i) => {
    const specifications = [...this.state.specifications];
    specifications.splice(i, 1);
    this.initSpecifications(specifications, true, true);
  };
  /**
   * @desc sku每子项添加
   * */
  itemAdd = (i) => {
    this.setState({ itemclosable: true });
    const specifications = [...this.state.specifications];
    let skuArr = specifications.map((v) => v.name);
    if (_.uniq(skuArr).length !== skuArr.length) {
      return React.$message({
        type: "info",
        content: "禁止重复添加商品规格！",
      });
    }
    let skuChildArr = specifications[i].child.map((v) => v.itemName);
    if (skuChildArr.includes(specifications[i].inputVal)) {
      React.$message({
        type: "info",
        content: "禁止重复添加SKU",
      });
      return;
    }
    if (!specifications[i].name.trim()) {
      React.$message({
        type: "info",
        content: "请输入商品规格名",
      });
      return;
    }
    if (specifications[i].inputVal.trim().length <= 0) {
      React.$message({
        type: "info",
        content: "请输入名称",
      });
      return;
    }
    specifications[i].child.push({
      name: specifications[i].name,
      itemName: specifications[i].inputVal,
      imageFile: "",
      skuOriginalPrice: "",
      // stock: "",
      skuCurrentPrice: "",
      fileList: [],
      skuWeight: "",
    });
    let arr = this.DescartesData(specifications);
    let len = arr.length;
    let numlen = this.state.numResult.length;
    let numberResult = [];
    if (_.isArray(arr[0])) {
      if (_.size(arr[0]) === 2) {
        let pointIndex = len / (len - numlen);
        if (i !== 0) {
          for (let ii = 1; ii <= arr.length; ii++) {
            if (ii % pointIndex === 0) {
              numberResult.push({
                materialId: "", //
                SKUId: "",
                skuOriginalPrice: "",
                // stock: "",
                skuCurrentPrice: "",
                imageFile: "",
                isChecked: false,
                fileList: [],
                skuWeight: "",
              });
            } else {
              numberResult.push(
                this.state.numResult[ii - Math.floor(ii / pointIndex) - 1]
              );
            }
          }
        } else {
          arr.forEach((v, i) => {
            if (i >= numlen) {
              numberResult.push({
                materialId: "", //
                SKUId: "",
                skuOriginalPrice: "",
                // stock: "",
                skuCurrentPrice: "",
                imageFile: "",
                isChecked: false,
                fileList: [],
                skuWeight: "",
              });
            } else {
              numberResult.push(this.state.numResult[i]);
            }
          });
        }
      }
      if (_.size(arr[0]) === 3) {
        if (i === 0) {
          arr.forEach((v, i) => {
            if (i >= numlen) {
              numberResult.push({
                materialId: "", //
                SKUId: "",
                skuOriginalPrice: "",
                // stock: "",
                skuCurrentPrice: "",
                imageFile: "",
                isChecked: false,
                fileList: [],
                skuWeight: "",
              });
            } else {
              numberResult.push(this.state.numResult[i]);
            }
          });
        }
        if (i === 1) {
          let skuSecond = len / (len - numlen);
          let SkuThere = this.state.skuNum;
          let skuFirst = this.state.skuF;
          let numResultCopy = this.state.numResult;
          for (let y = 1; y <= skuFirst; y++) {
            let array = new Array(SkuThere).fill({
              materialId: "",
              SKUId: "",
              skuOriginalPrice: "",
              // stock: "",
              skuCurrentPrice: "",
              imageFile: "",
              isChecked: false,
              fileList: [],
              skuWeight: "",
            });
            numResultCopy.splice(
              y * (skuSecond - 1) * SkuThere + (y - 1) * SkuThere,
              0,
              ...array
            );
            numberResult = numResultCopy;
          }
        }
        if (i === 2) {
          let pointIndex = len / (len - numlen);
          this.setState({
            skuNum: pointIndex,
          });
          for (let ii = 1; ii <= arr.length; ii++) {
            if (ii % pointIndex === 0) {
              numberResult.push({
                materialId: "", //
                SKUId: "",
                skuOriginalPrice: "",
                // stock: "",
                skuCurrentPrice: "",
                imageFile: "",
                isChecked: false,
                fileList: [],
                skuWeight: "",
              });
            } else {
              numberResult.push(
                this.state.numResult[ii - Math.floor(ii / pointIndex) - 1]
              );
            }
          }
        }
      }
    } else {
      arr.forEach((v, i) => {
        if (i >= numlen) {
          numberResult.push({
            materialId: "", //
            SKUId: "",
            skuOriginalPrice: "",
            // stock: "",
            skuCurrentPrice: "",
            imageFile: "",
            isChecked: false,
            fileList: [],
            skuWeight: "",
          });
        } else {
          numberResult.push(this.state.numResult[i]);
        }
      });
    }
    this.setState(
      {
        numResult: numberResult,
        delete: [],
      },
      () => {
        // console.log(this.state.numResult)
        this.initSpecifications(specifications, true, false);
        this.state.numResult.forEach((v, i) => {
          this.onUpload([], i);
        });
      }
    );
    specifications[i].inputVal = "";
  };
  /**
   * @desc sku每子项输入框修改
   * */
  itemChange = (e, i) => {
    const specifications = JSON.parse(
      JSON.stringify(this.state.specifications)
    );
    specifications[i].inputVal = e.target.value;
    this.setState({ specifications });
  };
  /**
   * @desc 子项删除事件
   * */
  itemDelete = (e, parentIndex, nowIndex) => {
    let array = this.state.numResult;
    let skuThere = this.state.skuNum;
    let deleteArr = [];
    let numberResult = this.state.numResult.length;
    switch (parentIndex) {
      case 0:
        let skuFirst = this.state.specifications[parentIndex].child.length;
        let skuSec = "";
        if (this.state.skuSec !== null) {
          skuSec = this.state.specifications[parentIndex + 1].child.length;
        } else {
          skuSec = 1;
        }
        if (skuThere !== null) {
          skuThere = this.state.specifications[parentIndex + 2].child.length;
        } else {
          skuThere = 1;
        }
        if (nowIndex === 0) {
          if (skuFirst == 1) {
            if (this.state.skuSec == null) {
              this.skuDelete(parentIndex);
            } else {
              React.$message({
                type: "info",
                content: "有下级分类未删除，当前不可删除",
              });
              this.setState({ itemclosable: false });
              setTimeout(() => {
                this.setState({ itemclosable: true });
              }, 3000);
              return;
            }
          }
          deleteArr = _.concat(
            deleteArr,
            _.slice(array, nowIndex, nowIndex + 1)
          );
        } else {
          if (skuSec == null) {
            deleteArr = _.concat(
              deleteArr,
              _.slice(array, nowIndex + skuFirst, nowIndex + skuFirst + 1)
            );
          } else {
            // console.log(nowIndex,skuSec,skuThere)
            // console.log(nowIndex*skuSec*skuThere,nowIndex*skuSec*skuThere+skuSec*skuThere)
            deleteArr = _.concat(
              deleteArr,
              _.slice(
                array,
                nowIndex * skuSec * skuThere,
                nowIndex * skuSec * skuThere + skuSec * skuThere
              )
            );
          }
        }
        break;
      case 1:
        let skuSecond = this.state.specifications[parentIndex].child.length;
        if (nowIndex === 0) {
          if (skuSecond == 1) {
            if (skuThere == null) {
              this.skuDelete(parentIndex);
            } else {
              React.$message({
                type: "info",
                content: "有下级分类未删除，当前不可删除",
              });
              this.setState({ itemclosable: false });
              setTimeout(() => {
                this.setState({ itemclosable: true });
              }, 3000);
              return;
            }
          }
          for (let i = 0; i < numberResult / skuSecond; i++) {
            deleteArr = _.concat(
              deleteArr,
              _.slice(array, skuSecond * i, skuSecond * i + 1)
            );
          }
        } else {
          if (skuThere == null) {
            for (let i = 0; i < numberResult / skuSecond; i++) {
              deleteArr = _.concat(
                deleteArr,
                _.slice(
                  array,
                  nowIndex + skuSecond * i,
                  nowIndex + skuSecond * i + 1
                )
              );
            }
          } else {
            for (let i = 0; i < numberResult / (skuSecond * skuThere); i++) {
              deleteArr = _.concat(
                deleteArr,
                _.slice(
                  array,
                  nowIndex * skuThere + skuSecond * skuThere * i,
                  nowIndex * skuThere + skuSecond * skuThere * i + skuThere
                )
              );
            }
          }
        }
        break;
      case 2:
        if (nowIndex === 0) {
          if (skuThere === 1) {
            this.skuDelete(parentIndex);
          }
          for (let i = 0; i < numberResult / skuThere; i++) {
            deleteArr = _.concat(
              deleteArr,
              _.slice(array, skuThere * i, skuThere * i + 1)
            );
          }
        } else {
          for (let i = 0; i < numberResult / skuThere; i++) {
            deleteArr = _.concat(
              deleteArr,
              _.slice(
                array,
                nowIndex + skuThere * i,
                nowIndex + skuThere * i + 1
              )
            );
          }
        }
        break;
      default:
        break;
    }
    // console.log(deleteArr)
    const specifications = JSON.parse(
      JSON.stringify(this.state.specifications)
    );
    specifications[parentIndex].child.splice(nowIndex, 1);
    let newNumResult = _.difference(array, deleteArr);
    let deleteskuids = [];
    for (let i = 0; i < deleteArr.length; i++) {
      // console.log(deleteArr[i].SKUId);
      deleteskuids = deleteskuids.concat(deleteArr[i].SKUId);
    }
    // console.log(deleteskuids)
    if (parentIndex === 2) {
      this.setState({
        skuNum: specifications[parentIndex].child.length,
        delete: [..._.compact(deleteskuids)],
      });
    }
    this.setState(
      {
        numResult: newNumResult,
        delete: [..._.compact(deleteskuids)],
      },
      () => {
        this.initSpecifications(specifications, true, false);
      }
    );
  };
  //获取物料ID
  async getMaterialId() {
    // let alias = this.props.alias
    let alias = "221213"
    let materialId = ""
    if (alias !== '') {
      let res = await React.$post('/management/goodsSku/findMaterialId', { alias, num: 1 })
      if (res.code === 0 && res.data) {
        materialId = res.data[0]
      }
    } else {
      React.$message({
        type: 'warning',
        content: '该商品分类无分类别名，不可生成物料ID'
      })
    }
    return materialId
  }
  /**
   * @desc 子项编辑事件
   * */
  itemEdit = (e, parentIndex, nowIndex) => {
    const specifications = JSON.parse(
      JSON.stringify(this.state.specifications)
    );
    const val = specifications[parentIndex].child[nowIndex].itemName;
    specifications[parentIndex].inputVal = val;
    specifications[parentIndex].child.splice(nowIndex, 1);
    this.initSpecifications(specifications, true, true);
  };
  /**
   * @desc  规格设置表格数据初始化
   * */
  initSpecifications = (specifications, type, isDefault) => {
    const tableResult = this.DescartesData(specifications);
    if (type) {
      this.setState({ specifications, tableResult });
    } else {
      this.setState({
        specifications,
        tableResult:
          tableResult.length === 0 ? this.state.tableResult : tableResult,
      });
    }
    this.props.getNumResult(
      this.numResultChange(specifications, isDefault),
      this.state.delete
    );
    this.props.getSkuProperty(specifications, tableResult);
  };

  /**
   * @desc 重新渲染
   * */
  numResultChange(specifications, isDefault) {
    let res = this.DescartesData(specifications) || [];
    let numResult = JSON.parse(JSON.stringify(this.state.numResult));
    let defaultData = {
      imageFile: "",
      skuOriginalPrice: "",
      // stock: "",
      skuCurrentPrice: "",
      isChecked: false,
      fileList: [],
    };
    res = res.map((v) => {
      return defaultData;
    });
    numResult.forEach((v, i) => {
      res.forEach((m, n) => {
        if (i === n) {
          res[i] = v;
        }
      });
    });
    if (isDefault) {
      res = res.map((v) => {
        return defaultData;
      });
    }
    this.setState({ numResult: res });
    return res;
  }

  /**
   * @desc 获取上传图片返回值
   * */
  getFileResult = (data, parentIndex, nowIndex) => {
    const specifications = [...this.state.specifications];
    if (data.length > 0 && data[0].response) {
      const fileId = data[0].response.data;
      specifications[parentIndex].child[nowIndex].img = fileId;
      this.initSpecifications(specifications, true);
    } else {
      specifications[parentIndex].child[nowIndex].img = "";
    }
  };

  /**
   * @desc 转换数据为笛卡尔数据模式
   * */
  DescartesData(arr) {
    //编辑原数组格式
    if (arr.length) {
      if (arr[0].child) {
        arr = arr.map((item) => {
          return (item = item.child);
        });
      }
      if (arr.length === 1) {
        //最终合并成一个
        return arr[0];
      } else {
        //有两个子数组就合并
        let arrySon = [];
        //将组合放到新数组中
        arr[0].forEach((_, index) => {
          arr[1].forEach((_, index1) => {
            arrySon.push([].concat(arr[0][index], arr[1][index1]));
          });
        });
        // 新数组并入原数组,去除合并的前两个数组
        arr[0] = arrySon;
        arr.splice(1, 1);
        // 递归
        return this.DescartesData(arr);
      }
    }
  }

  /**
   * @desc 设置suk综合属性 原价，库存，编码数据
   * */
  inputChange = (e, i, type) => {
    const val = e;
    const numResult = JSON.parse(JSON.stringify(this.state.numResult));
    if (type === "materialId") {
      numResult[i][type] = val.trim();
      if (val.substring(0, 1) === 'H' || val.substring(0, 1) === 'h') {
        React.$message({
          type: 'warning',
          content: '手动添加更改物料ID不能以"h,H"开头！'
        })
        numResult[i][type] = '';
      }
    } else {
      numResult[i][type] = val;
    }
    const deleteIds = this.state.delete;
    this.props.getNumResult(numResult, deleteIds);
    this.setState({ numResult });
  };
  clearMaterialId = (e, i) => {
    const numResult = [...this.state.numResult];
    if (e.keyCode === 8) {
      numResult[i].materialId = ''
      this.setState({
        numResult
      })
    }
  }
  /**
   * @desc 全选事件
   * */
  allChecked = (status) => {
    let numResult = [...this.state.numResult].map((v) => {
      v.isChecked = status;
      return v;
    });
    this.setState({
      checkedAllStatus: status,
      numResult,
    });
  };
  /**
   * @desc sukCheck选中事件
   * */
  checkboxChange = (e, i, type) => {
    const val = e.target.checked;
    const numResult = [...this.state.numResult];
    numResult[i][type] = val;
    let tmp = numResult.filter((v) => v.isChecked);
    this.setState({
      numResult,
      checkedAllStatus: tmp.length === numResult.length,
    });
  };
  /**
   * @desc 批量设置数据
   * */
  bulkSetData = (type) => {
    if (this.state.numResult.filter((v) => v.isChecked).length <= 0) {
      React.$message({
        type: "info",
        content: "请选择商品sku",
      });
      return;
    }
    let title = "";
    // if (type === "stock") {
    //   title = "批量设置库存";
    // } else
    if (type === "skuCurrentPrice") {
      title = "批量设置价格";
    }
    this.setState({
      title,
      type,
      dialogStatus: true,
    });
  };
  /**
   * @desc 批量设置数据提交方法
   * */
  bulkSave = (value) => {
    if (this.state.numResult.length <= 0) {
      React.$message({
        type: "info",
        content: "请选择商品sku",
      });
      return;
    }
    const numResult = [...this.state.numResult].map((v) => {
      if (v.isChecked) {
        v[this.state.type] = value.bulkNum;
      }
      return v;
    });
    this.setState({ numResult, dialogStatus: false });
  };

  onUpload = (data, index) => {
    const { numResult } = this.state;
    let result = JSON.parse(JSON.stringify(numResult));
    if (data.length > 0) {
      if (data[0].response && data[0].response.code === 0) {
        result[index].imageFile = data[0].response.data;
        result[index].fileList = [
          {
            name: "image",
            status: "done",
            uid: 1,
            url: data[0].response.data,
          },
        ];
        this.setState(
          {
            numResult: result,
          },
          () => this.props.getNumResult(this.state.numResult, this.state.delete)
        );
      }

    } else {
      result[index] = {
        ...result[index],
        imageFile: "",
        fileList: [],
      };
      this.setState(
        {
          numResult: result,
        },
        () => this.props.getNumResult(this.state.numResult, this.state.delete)
      );
    }
  };

  onSkuChange = (e, i, n) => {
    console.log(e, i, n);
    console.log(this.state.specifications[i].child[n].ischange);
    let specifications = this.state.specifications;
    specifications[i].child[n].ischange = true;
    this.initSpecifications(specifications, false, false);
    this.setState({
      specifications,
    });
  };

  skuChange = (val, parentIndex, nowIndex) => {
    const specifications = JSON.parse(
      JSON.stringify(this.state.specifications)
    );
    specifications[parentIndex].child[nowIndex].itemName = val.target.value;
    specifications[parentIndex].child[nowIndex].ischange = false;
    this.initSpecifications(specifications, false, false);
    this.setState({
      ischange: false,
    });
  };

  inputBlur = (val, i, n) => {
    const specifications = JSON.parse(
      JSON.stringify(this.state.specifications)
    );
    specifications[i].child[n].itemName = val.target.value;
    specifications[i].child[n].ischange = false;
    this.initSpecifications(specifications, false, false);
    this.setState({
      specifications,
    });
  };

  deleteSku = (e) => {
    const specifications = JSON.parse(
      JSON.stringify(this.state.specifications)
    );
    if (e.skuid) {
      React.$post("/management/goodsInfo/checkSKUDel", {
        skuId: e.skuid,
      })
        .then((res) => {
          if (res.code === 0) {
            specifications[0].child.splice(e.i, 1);
            this.itemDelete(null, 0, e.i);
          }
        })
        .catch((res) => { });
    } else {
      specifications[0].child.splice(e.i, 1);
      this.itemDelete(null, 0, e.i);
    }
  };
  render() {
    let {
      skuType,
      numResult,
      checkedAllStatus,
      dialogStatus,
      title,
      type,
      ischange,
      skuInfo,
    } = this.state;
    const { skuStatus } = this.props;
    let arr = this.state.specifications;
    let res = this.state.tableResult || [];
    let row = [];
    let rowspan = res.length;
    for (let n = 0; n < arr.length; n++) {
      row[n] = parseInt(rowspan / arr[n].child.length);
      rowspan = row[n];
    }
    let itemclosable = true;
    if (arr.length > 1) {
      itemclosable = false;
    }
    const tdRow = (i) =>
      arr.map((_, j) => {
        let td;
        if (i % row[j] === 0 && row[j] > 1) {
          res[i] &&
            (td = res[i][j] && (
              <td rowSpan={row[j]} key={j}>
                <div className="tdRowName">{res[i][j].itemName}</div>
              </td>
            ));
        } else if (row[j] === 1) {
          res[i] &&
            (res[i] instanceof Array
              ? (td = res[i][j] && (
                <td key={j}>
                  <div className="tdRowName">{res[i][j].itemName}</div>
                </td>
              ))
              : (td = (
                <td key={j}>
                  <div className="tdRowName">{res[i].itemName}</div>
                </td>
              )));
        }
        return td;
      });
    return (
      <>
        <div className="spotGoods-sku-list">
          <div className="spotGoods-sku-item"></div>
          <div className="spotGoods-sku-item">
            <Row>
              <Col span={3}>
                <span className="spotGoods-item-label">商品规格：</span>
              </Col>
              <Col span={20}>
                <div className="spotGoods-Specification-box">
                  <p style={{ color: "red", marginBottom: 10 }}>
                    *修改商品规格将会清空规格设置
                  </p>
                  {arr.map((v, i) => {
                    return (
                      !v.isHidden && (
                        <div key={i} className="spotGoods-Specification-item">
                          <div className="spotGoods-Specification-model clearfix">
                            <Input
                              className={"fl"}
                              defaultValue={v.name}
                              onBlur={(e) => this.sukEdit(e, i)}
                              maxLength={100}
                            />
                            <span className={"fl"}>最多输入100个字</span>
                            {/* {i + 1 === arr.length && (
                              <em
                                className={"fr"}
                                onClick={() => this.skuDelete(i)}
                              >
                                <DeleteOutlined />
                                删除
                              </em>
                            )} */}
                          </div>
                          <div className="spotGoods-model-label">
                            {v.child.map((k, n) => {
                              return (
                                <div key={n} className="spotGoods-model-tag">
                                  <Tag
                                    color="#108ee9"
                                    // closable = {itemclosable}
                                    onDoubleClick={(e) =>
                                      this.onSkuChange(e, i, n)
                                    }
                                  // onClose={(e) => this.itemDelete(e, i, n)}
                                  >
                                    {k.ischange ? (
                                      <Input
                                        autoFocus
                                        onBlur={(e) => {
                                          this.inputBlur(e, i, n);
                                        }}
                                        defaultValue={k.itemName}
                                        onPressEnter={(e) => {
                                          this.skuChange(e, i, n);
                                        }}
                                      />
                                    ) : (
                                      k.itemName
                                    )}
                                  </Tag>
                                </div>
                              );
                            })}
                            <div className="spotGoods-model-operation">
                              <Input
                                value={v.inputVal}
                                maxLength={100}
                                onChange={(e) => this.itemChange(e, i)}
                              />
                              <Button
                                type={"primary"}
                                size={"small"}
                                onClick={() => this.itemAdd(i)}
                              >
                                添 加
                              </Button>
                              <span>双击可修改规格名称</span>
                            </div>
                          </div>
                        </div>
                      )
                    );
                  })}
                  {
                    // arr.length < 3 && <div
                    //   className="spotGoods-sku-Specification"
                    //   onClick={this.skuAdd}
                    // >
                    //   <PlusOutlined style={{ fontSize: 30, color: "#999" }} />
                    // </div>
                  }
                </div>
              </Col>
            </Row>
          </div>
          {numResult.length > 0 && (
            <div className="spotGoods-sku-item">
              <Row>
                <Col span={3}>
                  <span className="spotGoods-item-label">规格设置：</span>
                </Col>
                <Col span={20}>
                  <table className="spec-table">
                    <thead>
                      <tr>
                        <th>
                          <Checkbox
                            label={"全选"}
                            onChange={(e) => this.allChecked(e.target.checked)}
                            checked={checkedAllStatus}
                          />
                        </th>
                        {arr
                          .filter((v) => v.name && v.child && v.child.length)
                          .map((th, k) => {
                            return (
                              <th key={k}>
                                <div className="property-name">{th.name}</div>
                              </th>
                            );
                          })}
                        <th width={150}>物料ID</th>
                        <th>商品物料名称(仓库用 APP不显示)</th>
                        <th>原价</th>
                        <th>现价</th>
                        {/* <th>库存</th> */}
                        <th>重量</th>
                        <th>描述</th>
                        <th>图片</th>
                        <th>操作</th>
                      </tr>
                      {numResult.map((v, i) => {
                        return (
                          <tr key={i}>
                            <th>
                              <Checkbox
                                onChange={(e) =>
                                  this.checkboxChange(e, i, "isChecked")
                                }
                                checked={v.isChecked}
                              />
                            </th>
                            {tdRow(i)}
                            <td>
                              <Input
                                value={v.materialId}
                                maxLength={50}
                                onChange={(e) => {
                                  let val = e.target.value;
                                  this.inputChange(val, i, "materialId");
                                }}
                                placeholder="不填自动生成"
                                onKeyDown={(e) => { this.clearMaterialId(e, i) }}
                              />
                            </td>
                            <td>
                              <Input
                                value={v.materialName}
                                maxLength={50}
                                onChange={(e) => {
                                  let val = e.target.value;
                                  this.inputChange(val, i, "materialName");
                                }}
                              />
                            </td>
                            <td>
                              <InputNumber
                                min={0.01}
                                max={10000000}
                                formatter={limitDecimals}
                                value={v.skuOriginalPrice}
                                onChange={(e) =>
                                  this.inputChange(e, i, "skuOriginalPrice")
                                }
                              />
                            </td>
                            <td>
                              <InputNumber
                                min={0.01}
                                max={10000000}
                                formatter={limitDecimals}
                                value={v.skuCurrentPrice}
                                onChange={(e) =>
                                  this.inputChange(e, i, "skuCurrentPrice")
                                }
                              />
                            </td>
                            {/* <td>
                                <InputNumber
                                  min={0}
                                  max={10000000}
                                  precision={0}
                                  value={v.stock}
                                  onChange={(e) =>
                                    this.inputChange(e, i, "stock")
                                  }
                                />
                              </td> */}
                            <td>
                              <InputNumber
                                min={0}
                                precision={1}
                                value={v.skuWeight}
                                onChange={(e) =>
                                  this.inputChange(e, i, "skuWeight")
                                }
                              />
                            </td>
                            <td>
                              <Input
                                value={v.skuDescription}
                                onChange={(e) => {
                                  let val = e.target.value;
                                  this.inputChange(val, i, "skuDescription");
                                }}
                              />
                            </td>
                            <td>
                              {v.fileList && (
                                <TheUpload
                                  fileList={v.fileList}
                                  label={"上传图片"}
                                  pid={i}
                                  index={i}
                                  len={1}
                                  getFileResult={this.onUpload}
                                />
                              )}
                            </td>
                            <td>
                              {arr.length === 1 && numResult.length > 1 ? (
                                <TheButton
                                  hasPermi={["centermall:sku:del"]}
                                  onClick={() => {
                                    this.deleteSku({ skuid: v.SKUId, i });
                                  }}
                                >
                                  删除
                                </TheButton>
                              ) : null}
                            </td>
                          </tr>
                        );
                      })}
                    </thead>
                  </table>
                  <div className="spotGoods-btn-box">
                    <Space>
                      <Space>
                        <Button
                          type="primary"
                          onClick={() => this.allChecked(true)}
                        >
                          全选
                        </Button>
                        <Button
                          type="primary"
                          onClick={() => this.allChecked(false)}
                        >
                          取消
                        </Button>
                        <Button
                          className="green-background"
                          onClick={() => this.bulkSetData("stock")}
                        >
                          批量设置库存
                        </Button>
                        <Button
                          className="green-background"
                          onClick={() => this.bulkSetData("skuCurrentPrice")}
                        >
                          批量设置价格
                        </Button>
                      </Space>
                    </Space>
                  </div>
                </Col>
              </Row>
            </div>
          )}
        </div>
        <TheDialog
          width={600}
          visible={dialogStatus}
          title={title}
          handleCancel={() => this.setState({ dialogStatus: false })}
          footer={null}
        >
          <Form {...layout} ref={this.fromRef} onFinish={this.bulkSave}>
            <Form.Item
              label={title}
              name="bulkNum"
              rules={[{ required: true }]}
            >
              <InputNumber
                max={10000000}
                min={type === "stock" ? 0 : 0.01}
                precision={type === "stock" ? 0 : 2}
              />
            </Form.Item>
            <div className="p-text-align">
              <Space>
                <Button type="primary" htmlType="submit">
                  确定
                </Button>
                <Button onClick={() => this.setState({ dialogStatus: false })}>
                  取消
                </Button>
              </Space>
            </div>
          </Form>
        </TheDialog>
      </>
    );
  }
}

SkuUpdate.propTypes = {
  getSkuProperty: PropTypes.func,
  getNumResult: PropTypes.func,
  defaultValue: PropTypes.array,
};
SkuUpdate.defaultProps = {
  defaultValue: [],
};
export default SkuUpdate;
